import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {
  Row,
  Col,
  Avatar,
  // Button,
} from 'antd';

import {
  isInvalid,
  formatDatetime,
  // isMoney,
  searchFromList,
  refitCommonData,
} from '../../../utils/tools';
import DescriptionList from '../../../components/DescriptionList';
import PageHeaderWrapperCustom from '../../../customComponents/PageHeaderWrapperCustom';

import styles from './index.less';

const { Description } = DescriptionList;
// const ButtonGroup = Button.Group;

const tabList = [
  {
    key: 'basicInfo',
    tab: '基本信息',
  },
  {
    key: 'contentInfo',
    tab: '详细描述',
  },
];

@connect(({ saler, global, loading }) => ({
  saler,
  global,
  loading: loading.models.saler,
}))
class Edit extends PureComponent {
  isMountedFlag = false;

  constructor(props) {
    super(props);
    this.state = {
      mounted: false,
      metaData: {},
      dataLoading: true,
    };
  }

  componentDidMount() {
    this.isMountedFlag = true;
    this.setState({ mounted: true });
    const { match } = this.props;
    const { params } = match;
    const { id: salerId } = params;

    this.loadData(salerId);
  }

  componentWillReceiveProps(nextProps) {
    const {
      match: {
        params: { op, id: salerId },
      },
    } = nextProps;

    const { mounted, dataLoading } = this.state;
    if (mounted && !dataLoading) {
      if (op === 'update') {
        this.loadData(salerId);
      }
    }
  }

  salerStatusList = () => {
    const { global } = this.props;
    return refitCommonData(global.salerStatusList);
  };

  getProductStatusName = (v, defaultValue = '') => {
    if (isInvalid(v)) {
      return defaultValue;
    }

    const item = searchFromList('flag', v, this.salerStatusList());
    return item == null ? '未知' : item.name;
  };

  loadData = id => {
    const { dispatch } = this.props;

    this.setState({ dataLoading: true }, () => {
      dispatch({
        type: 'saler/get',
        payload: {
          prodictid: id,
        },
      }).then(() => {
        if (this.isMountedFlag) {
          const {
            saler: {
              data: { data },
            },
          } = this.props;

          this.setState({ dataLoading: false, metaData: data });
        }
      });
    });
  };

  handleTabChange = key => {
    const { dispatch, match } = this.props;
    let location = {};
    switch (key) {
      case 'basicInfo':
        location = {
          pathname: `${match.url.replace('/update', '/load')}/basicInfo`,
        };
        break;
      case 'contentinfo':
        location = {
          pathname: `${match.url.replace('/update', '/load')}/contentInfo`,
        };
        break;
      default:
        break;
    }

    dispatch(routerRedux.push(location));
  };

  render() {
    const {
      match,
      // route: { routes },
      children,
    } = this.props;
    const { metaData, dataLoading } = this.state;

    return (
      <PageHeaderWrapperCustom
        title={`服务站名称：${metaData.chvmname || ''}`}
        logo={
          <Avatar
            size="large"
            src={metaData.image || 'http://ds.liangzivip.com/noImageSmall.png'}
          />
        }
        // action={(
        //   <Fragment>
        //     <ButtonGroup>
        //       <Button>操作</Button>
        //       <Button>操作</Button>
        //     </ButtonGroup>
        //     <Button type="primary">主操作</Button>
        //   </Fragment>
        // )}
        customLoading={dataLoading}
        // eslint-disable-next-line no-restricted-globals
        tabActiveKey={location.hash.replace(`#${match.url}/`, '')}
        content={
          <DescriptionList className={styles.headerList} size="small" col="2">
            <Description term="站长姓名">{metaData.chvrealname}</Description>
            <Description term="联系电话">{metaData.phone}</Description>
            <Description term="紧急联系电话">{metaData.emergencyPhone}</Description>
            <Description term="身份证号">{metaData.idCard}</Description>
            <Description term="开户银行">{metaData.bankName}</Description>
            <Description term="银行卡号">{metaData.creditCardNumber}</Description>
          </DescriptionList>
        }
        extraContent={
          <Row>
            <Col xs={24} sm={12}>
              <div className={styles.textSecondary}>入驻日期</div>
              <div className={styles.heading}>
                {' '}
                {formatDatetime(metaData.dtmintime, 'HH:mm:ss', '--')}
                <br />
                {formatDatetime(metaData.dtmintime, 'YYYY-MM-DD')}
              </div>
            </Col>
            <Col xs={24} sm={12}>
              <div className={styles.textSecondary}>当前状态</div>
              <div className={styles.heading}>
                {this.getProductStatusName(metaData.intstate, '--')}
              </div>
            </Col>
          </Row>
        }
        tabList={tabList}
        onTabChange={this.handleTabChange}
      >
        {children}
      </PageHeaderWrapperCustom>
    );
  }
}

export default Edit;
